<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=8" />
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
    <title>jQuery Ribbon</title>
    <script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="scripts/jquery.ribbon.js" type="text/javascript"></script>
    <script src="scripts/page.js" type="text/javascript"></script>
    <link href="style.css" rel="Stylesheet" type="text/css" />
</head>
<body>
    <div class="mainContainer">
        <ul class="ribbon">
            <li>
					<!-- Orb Button -->
						<!-- <<< -->
                <ul class="orb"> 
                    <li><a href="javascript:void(0);" accesskey="1" class="orbButton">&nbsp;</a><span>Menu</span>
                        <ul>
                            <li><a href="#">
                                <img src="ribbon/images/icon_save.png" alt="Save" /><span>Save</span></a> </li>
                             <!--
                            <li><a href="#">
                                <img src="ribbon/images/icon_saveas.png" alt="Save as" /><span>Save As</span></a>
                                <ul>
                                    <li><a href="#">
                                        <img src="ribbon/images/icon_richtext.png" alt="Rich Text" /><span>Rich Text document</span></a>
                                    </li>
                                    <li><a href="#">
                                        <img src="ribbon/images/icon_ooxml.png" alt="OOXML" /><span>Office Open XML document</span></a>
                                    </li>
                                    <li><a href="#">
                                        <img src="ribbon/images/icon_ooxml.png" alt="Open Document" /><span>OpenDocument text</span></a>
                                    </li>
                                    <li><a href="#">
                                        <img src="ribbon/images/icon_plaintext.png" alt="Plain text" /><span>Plain text document</span></a>
                                    </li>
                                    <li><a href="#">
                                        <img src="ribbon/images/icon_otherformats.png" alt="Other formats" /><span>Other formats</span></a>
                                    </li>
                                </ul>
                            </li>
                            -->
                            <li><a href="#">
                                <img src="ribbon/images/icon_print.png" alt="Print" /><span>Print</span></a>
                            <!--
                                <ul>
                                    <li><a href="#">
                                        <img src="ribbon/images/icon_print.png" alt="Print" /><span>Print</span></a>
                                    </li>
                                    <li><a href="#">
                                        <img src="ribbon/images/icon_quickprint.png" alt="Quick print" /><span>Quick print</span></a>
                                    </li>
                                    <li><a href="#">
                                        <img src="ribbon/images/icon_printpreview.png" alt="Print preview" /><span>Print preview</span></a>
                                    </li>
                                </ul>
                            -->
                            </li>

                            <li><a href="#">
                                <img src="ribbon/images/icon_sendemail.png" alt="Send in e-mail" /><span>Send in e-mail</span></a>
                                <ul>
                                    <li><a href="#">
                                        <img src="ribbon/images/icon_sendemail.png" alt="Send via Outlook" /><span>Send via Outlook</span></a>
                                    </li>
                                    <li><a href="#">
                                        <img src="ribbon/images/icon_sendemail.png" alt="Server Send mail" /><span>SMPT Service</span></a>
                                    </li>
                                </ul>
                            </li>
                            <li><a href="#">
                                <img src="ribbon/images/icon_about.png" alt="About" /><span>About</span></a>
                            </li>
                            <li><a href="#">
                                <img src="ribbon/images/icon_exit.png" alt="Exit" /><span>Exit</span></a> </li>
                        </ul>
                    </li>
                </ul>
							<!-- >>> -->
            </li>
            <li>
                <ul class="menu">
               	  <!-- View tab -->
							<!-- <<< -->
                    <li><a href="#view" accesskey="3">View</a>
                        <ul>
                            <li>
                                <h2>
                                    Zoom</h2>
                                <div>
                                    <img src="ribbon/images/icon_zoomin.png" alt="Zoom in" />
                                    Zoom in
                                </div>
                                <div>
                                    <img src="ribbon/images/icon_zoomout.png" alt="Zoom out" />
                                    Zoom out
                                </div>
                                <div class="ribbon-list">
                                    <div>
                                       <span>Fit to screen</span>
                                    </div>
                                    <div>
                                       <span>Fit to width</span>
                                    </div>
                                    <div>
                                       <span>Fit to height</span>
                                    </div>
                                </div>
                            </li>
                            <li>
                              <h2>Navigate</h2>
                              <div class="ribbon-list">
                                 <div>
                                    <img src="ribbon/images/navigate_beginning16.gif" alt="Go to the first page"/>First Page
                                 </div>
                                 <div>
                                    <img src="ribbon/images/navigate_fastleft16.gif" alt="Go to the previour block of pages"/>Previous Page Block
                                 </div>
                                 <div>
                                    <img src="ribbon/images/navigate_left16.gif" alt="Block left"/>Previous Page 
                                 </div>
                              </div>
                              <div class="ribbon-list">
                                 <div>
                                    <img src="ribbon/images/navigate_end16.gif" alt="Go to the last page"/>Last Page
                                 </div>
                                 <div>
                                    <img src="ribbon/images/navigate_fastright16.gif" alt="Go to the next block of pages"/>Next Page Block
                                 </div>
                                 <div>
                                    <img src="ribbon/images/navigate_right16.gif" alt="Go to the next page"/>Next Page 
                                 </div>
                              </div>
                            </li>
                            <li>
                              <h2>Rotate</h2>
                              <div class="ribbon-list">
                                 <div>
                                    <img src="ribbon/images/rotate90_16.gif" alt="Rotate clockwise"/>Clockwise 
                                 </div>
                                 <div>
                                    <img src="ribbon/images/rotate270_16.gif" alt="Rotate counterclockwise"/>Counterclockwise
                                 </div>
                                 <div>
                                    <img src="ribbon/images/rotate180_16.gif" alt="Rotate the page 180 degrees"/>Up side down 
                                 </div>
                              </div>
                            </li>
                        </ul>
                    </li> 
							<!-- >>> -->

						  <!-- Edit Tab -->
							<!-- <<< -->
                    <li><a href="#edit" accesskey="2">Edit</a>
                        <ul>
                            <li>
                              <h2><span>Clipboard</span></h2>
                              <div>
                                 <img src="ribbon/images/icon_paste.png" alt="Clipboard"/>Copy
                              </div>
                              <div class="ribbon-list">
                                 <div>
                                    <img src="ribbon/images/select.gif" alt="Select"/>Select Image
                                 </div>
                                 <div>
                                    <img src="ribbon/images/select_text.gif" alt="Select"/>Select Text
                                 </div>
                              </div>
                            </li>
                            <li>
                                <h2><span>Search</span></h2>
                                <div class="ribbon-list">
                                    <div>
                                       <img src="ribbon/images/search16.gif" alt="Search" />Search
                                    </div>
                                    <div>
                                       <img src="ribbon/images/search_attributes16.gif" alt="Search Attributes" />Attribute search
                                    </div>
                                </div>
                            </li>
                            <li>
                              <h2><span>Notes & Annotation</span></h2>
                              <div class="ribbon-list">
                                 <div>
                                    <img src="ribbon/images/annotation_users16.gif" alt="Select Users" />Select Annotation
                                        <ul>
                                            <li>all</li>
                                            <li>martinme</li>
                                            <li>Administrator</li>
                                            <li>frankjo</li>
                                            <li>janshe</li>
                                        </ul>
                                 </div>
                                 <div>
                                    <img src="ribbon/images/note_new16.gif" alt="Search Attributes" />Add note&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                 </div>
                                 <div>
                                    <img src="ribbon/images/print16.gif" alt="Print Notes" />Print notes 
                                 </div>
                              </div>
                            </li>
                        </ul>
                    </li>
							<!-- >>> -->

						  <!-- Window -->
							<!-- <<< -->
                    <li><a href="#display" accesskey="2">Window</a>
                        <ul>
                            <li>
                                <h2>
                                    Show or hide</h2>
                                <div class="ribbon-list">
                                    <div>
                                        <input type="checkbox" id="chkbox1" />
                                        <label accesskey="t" for="chkbox1">
                                            Thumbnails</label>
                                    </div>
                                    <div>
                                        <input type="checkbox" id="chkbox2" />
                                        <label accesskey="n" for="chkbox2">
                                            Notes</label>
                                    </div>
                                    <div>
                                        <input type="checkbox" id="chkbox3" />
                                        <label accesskey="a" for="chkbox3">
                                            Annotation</label>
                                    </div>
                                </div>
                                <div class="ribbon-list">
                                    <div>
                                        <input type="checkbox" id="chkbox4" />
                                        <label accesskey="t" for="chkbox4">
                                            Form</label>
                                    </div>
                                    <div>
                                        <input type="checkbox" id="chkbox5" />
                                        <label accesskey="n" for="chkbox5">
                                            Reverse Sides</label>
                                    </div>
                                    <div>
                                        <input type="checkbox" id="chkbox6" />
                                        <label accesskey="a" for="chkbox6">
                                            Cover Sheet</label>
                                    </div>
                                </div>
                                <div class="ribbon-list">
                                    <div>
                                        <input type="checkbox" id="chkbox7" />
                                        <label accesskey="t" for="chkbox7">
                                            Signature</label>
                                    </div>
                                    <div>
                                        <input type="checkbox" id="chkbox8" />
                                        <label accesskey="n" for="chkbox8">
                                            Smooth Image</label>
                                    </div>
                                </div>
                            </li>
									<li>
										<h2>Leave</h2>
										<div>
                                	 <img src="ribbon/images/icon_exit.png" alt="Exit" /><span>Exit</span>
										</div>
									</li>
								</ul>
							</li>

							<!-- >>> -->

                    <!-- Annotation tab -->
							<!-- <<< -->

                    <li><a href="#annotation" accesskey="3">Annotation</a>
                        <ul>
                            <li>
                              <div>
                                 <img src="ribbon/images/icon_save.png" alt=""/>Save
                              </div>
                              <div class="ribbon-list">
                                 <div>
                                    <img src="ribbon/images/annotation_ellipse16.png"/>Elipse
                                 </div>
                                 <div>
                                    <img src="ribbon/images/annotation_arrow16.png"/>Arrow
                                 </div>
                                 <div>
                                    <img src="ribbon/images/annotation_freehand16.png"/>Freehand</span>
                                 </div>
                              </div>
                              <div class="ribbon-list">
                                 <div>
                                    <img src="ribbon/images/annotation_checkmark16.png"/>Checkmark
                                 </div>
                                 <div>
                                    <img src="ribbon/images/annotation_line16.png"/>Line
                                 </div>
                                 <div>
                                    <img src="ribbon/images/annotation_highlight16.png"/>Highlight</span>
                                 </div>
                              </div>
                              <div class="ribbon-list">
                                 <div>
                                    <img src="ribbon/images/annotation_text16.png"/>Text
                                 </div>
                                 <div>
                                    <img src="ribbon/images/annotation_stamp16.png"/>Stamp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <ul>
                                       <li>Approved</li>
                                       <li>Rejected</li>
                                       <li>Postponed</li>
                                       <li>Sensitive</li>
                                    </ul>
                                 </div>
                                 <div>
                                    <img src="ribbon/images/annotations_list16.gif"/>List of annotation
                                 </div>
                              </div>
                            </li>
                        </ul>
                    </li>
							<!-- >>> -->
                </ul>
            </li>
        </ul>
    </div>
    <div class="textbox">
        <div>
            <h1>
                jQuery Ribbon</h1>
            <h2>
                How do I use it?</h2>
            <p>
                First of all you need to <a href="http://jqueryribbon.codeplex.com">download the source</a>.</p>
            <p>
                The next step is to unzip all the files to your website. After that you need to
                grab the source code in the HTML and add to your site where you want to have the
                ribbon, and add references to the javascript files.</p>
            <p>
                To enable the ribbon you just have to add this code snippet:</p>
            <pre> $().ready(function() {
    $().Ribbon();
});</pre>
            <p>
                The menu is built on ul lists, so to add new submenu items in the menu, just add
                a nested list and it will be added autmagically.</p>
            <p>
                If you have any questions or comments, please let me know.</p>                
            <h2>
                Author</h2>
            Copyright &copy; 2009, Mikael Söderström.<br />
            <a href="http://weblogs.asp.net/mikaelsoderstrom">My blog</a><br />
            <a href="http://twitter.com/vimpyboy">vimpyboy@twitter</a>
        </div>
    </div>
</body>
</html>
